背景

周末经常会和朋友打掼蛋，但打着打着就忘了这轮打几、谁贡牌了。于是写了一个网页端的掼蛋计分器，平时打牌的时候可以开着 iPad 放在旁边当实时的记牌器。

在线使用

🔗 https://guandan.mapin.net/

功能概览

计分规则

• 级数：从 2 打到 A，再到 A2、A3。打 A 阶段头游+二游或头游+三游即获胜。
• 加分：头游+二游 +3、头游+三游 +2、头游+末游 +1。只给赢家一方加分。
• 进贡：双下（头游+二游）时双贡，单下（头游+三游）或保级（头游+末游）时单贡。末游进贡给头游，双贡时三游进贡给二游。
• 打级方：赢家成为下一轮的庄家（打级方），中央大号数字显示当前是谁在打几。

界面布局

• 左侧（红方）：选择本局结果 +3（头/二）、+2（头/三）、+1（头/末），确认/撤销
• 右侧（蓝方）：同上
• 中间：当前打级方的大号级数（带红蓝颜色）、双方进度条、打 A 获胜时皇冠动画
• 进贡区域：每局结束后自动展示本局进贡关系：末游→头游（进大/进小）、三游→二游（双贡时）

适配

支持 iPad、电脑端；手机建议横屏使用，竖屏窄屏会提示旋转。

技术栈

• Vue 3 + Vite + TypeScript
• Pinia 状态管理
• Tailwind CSS 样式
• Lottie 打 A 胜利皇冠动画

项目结构

src/
├── App.vue
├── pages/Scoreboard.vue      # 主计分板布局
├── components/
│   ├── ScoreCard.vue         # 中央级数卡片 + 皇冠动画
│   ├── SidePanel.vue         # 红/蓝方结果选择
│   ├── LevelProgressBars.vue # 双方级数进度条
│   ├── TributeDiagram.vue    # 进贡关系图示
│   ├── ResultButtons.vue     # +3/+2/+1 按钮
│   ├── ConfirmActions.vue    # 确认/撤销
│   └── RotatePrompt.vue      # 竖屏旋转提示
├── store/gameStore.ts        # 游戏状态
├── composables/useGameControl.ts  # 局局逻辑与进贡计算
└── types/game.ts             # 类型定义

开源

项目地址：guandan（如有需要可自行部署，纯静态页面，vite build 后即可托管）